<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
 <meta name="description" content="W3C SVG 1.1 Test Suite"/>
 <title>
SVG 1.1 test:filters-displace-01-f </title>
 <style type="text/css">
 <!--
 body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
 .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
 .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
 .openChapter { color: blue; line-height: 1.3; font-weight: bold }
 .openSection { color: blue; line-height: 125%; font-weight: bold }
 .info { color: black; line-height: 1.2; font-size: 90%; }
 p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
 blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
 .opscript {margin-left: 3%; margin-right: 3%; }
 .opscript p { margin-top: 0.7em}
 .navbar {background: black; color: white; font-weight: bold}
 -->
 </style>
 </head>
 <body class="bodytext">

	<div class="linkbar"> 
<p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMap">15.15 Filter primitive 'feDisplacementMap'</a></p>
 <p>
				<a href="full-filters-diffuse-01-f.html">filters-diffuse-01-f ←</a> 
				<a href="full-index.html">index</a>
				<a href="full-filters-light-01-f.html">→ filters-light-01-f</a>
						</p></div>

	<table align="center" border="0" cellspacing="0" cellpadding="10">
		<tr>
			<td align="center" colspan="3">
				<table border="0" cellpadding="8">
					<tr>
						<td align="center" colspan="2" class="pageTitle">
							<h1>filters-displace-01-f</h1>
						</td>
					</tr>
					<tr  class="navbar">
						<td align="center">
							SVG Image
						</td>
						<td align="center">
							PNG Image
						</td>
					</tr>
					<tr>
						<td align="right">
   	    		  			
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="" id="mySVGViewerObj" width=480 height=360>
    <param name=movie value="../SvgViewer.swf">
    <param name="FlashVars" value="sourceType=url_svg&svgURL=../svggen/filters-displace-01-f.svg">
    <param name="wmode" value="transparent">
    <embed play=false name="mySVGViewerObj" 
	    src="../SvgViewer.swf" quality=high wmode="transparent"
	    width=480 height=360 type="application/x-shockwave-flash"
	    FlashVars="sourceType=url_svg&svgURL=../svggen/filters-displace-01-f.svg">
    </embed >
</object>
						</td>
						<td align="left">
							<img alt="raster image of filters-displace-01-f" src="../png/full-filters-displace-01-f.png" width="480" height="360"/>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

               
<div class="opscript">
         <p>
Verify the basic capability to handle the feDisplacementMap filter
node.  Six images should appear in 2 rows of 3.  On the left in each
row a test image of a checker board is displayed.  In the middle
column is the displacement map.  In the right-hand column is the
result.  All displacement maps are generated as png files with gamma
1.0 and must be interpreted linearly for the proper geometric
displacement to occur.
         </p>
         <p>
The top row tests a displacement map which displaces each pixel by an
amount equivalent to a rotation of 20 degrees around the center of the
image.  A blue reference rectangle is drawn on the result using an svg
transform attribute to mimick the same 20 degree rotation.  The edges
of the blue rectangle should be parallel to the grid lines in the
displaced image.  Distortion of the grid pattern such that the grid
lines are slightly curved is indicative of improper gamma handling in
the viewer.
         </p>
         <p>
The bottom row tests a displacement map which distorts the image
spherically.  The rendered image should match the reference image. In
particular the center of the distorted image should be on a gridpoint.
         </p>
         <p>
In addition to feDisplacementMap, this test uses the 'feImage' and
'rect' elements.  Figure labeling uses the text element.  The
reference blue rectangle uses fill, fill-opacity, and transform.
         </p>

		</div>
<div class="linkbar"> <p>
				<a href="full-filters-diffuse-01-f.html">filters-diffuse-01-f ←</a>
				<a href="full-index.html">index</a>
				<a href="full-filters-light-01-f.html">→ filters-light-01-f</a>
						</p></div>
</body>
</html>
